<!--
Date: 2025-08-13
Copyright (c) 2025 Industrial Software Feature Database
-->
<template>
  <div>
    <el-tooltip :content="title" v-if="title != '帮助' && title != '全屏'">
      <div :class="getIconHolderClass" @click="handleOnClick">
        <img :src="imgSrc" style="height: 22px; width: 22px" />
      </div>
    </el-tooltip>
    <el-tooltip :content="title" v-if="title === '全屏'">
      <div :class="getIconHolderClass" @click="handleOnClick">
        <el-icon size="22" color="#00ffff"><FullScreen /></el-icon>
      </div>
    </el-tooltip>
    <el-popover placement="bottom" :width="200" v-if="title === '帮助'" trigger="hover">
      <template #reference>
        <div :class="getIconHolderClass" @click="handleOnClick">
          <el-icon size="22" color="#00ffff"><WarningFilled /></el-icon>
        </div>
      </template>
      <div>
        <div>点选：点击鼠标左键；</div>
        <div>框选：左键按住拖动；</div>
        <div>多选：左键 + shift；</div>
        <div>取消选择：左键 + ctrl；</div>
        <div>转动：右键 + ctrl；</div>
        <div>平移：滚轮按住拖动；</div>
      </div>
    </el-popover>
  </div>
</template>

<script>
const iconPrefixCls = 'threeBlue';
const selectedPrefixCls = 'selected';
const unselectedPrefixCls = 'unselected';

export default {
  name: 'ToolbarIcon',
  props: {
    title: {
      type: String,
      default: ''
    },
    name: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: ''
    },
    selected: {
      type: Boolean,
      default: false
    },
    imgSrc: {
      type: String,
      default: ''
    }
  },
  methods: {
    handleOnClick() {
      this.$emit('on-click', this.name);
    }
  },
  computed: {
    getIconClass() {
      return `${iconPrefixCls} ${this.type}`;
    },
    getIconHolderClass() {
      let iconholdercss = '';
      if (this.selected) {
        iconholdercss = `${selectedPrefixCls} iconholder`;
      } else {
        iconholdercss = `${unselectedPrefixCls} iconholder`;
      }
      return iconholdercss;
    }
  }
};
</script>

<style lang="less" scoped>
@import url('../iconfont/threeBlue/iconfont.css');
.selected {
  // background-color: white; //#e0e0e0
  cursor: pointer;
}
.unselected:hover {
  // background-color: white; //#d6d6d6
  cursor: pointer;
}
.iconholder {
  height: 36px;
  width: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>